<script lang="ts">

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    userInfo: {
      type: Object,
      default: () => {
        return {
          "currentExpertLevelId": 5,
          "currentSkillLevelId": 4,
          "currentTitleLevelId": 1,
          "currentWorkSeriesId": 2,
          "directCode": null,
          "eduLevelNumber": 7,
          "eduMajorCode": "030504T",
          "eduMajorDegrees": [{
            "degreeMajorCode": "03",
            "gmtCreate": null,
            "gmtModified": null,
            "id": 1,
            "userAccountId": 579809487052805
          }, {
            "degreeMajorCode": "01",
            "gmtCreate": null,
            "gmtModified": null,
            "id": 2,
            "userAccountId": 579809487052805
          }],
          "email": null,
          "fileIdOfAvatar": 576879478120453,
          "genderCode": "male",
          "gmtBirthday": null,
          "gmtCreate": 1723691452552,
          "gmtCurrentExpertLevelStart": 1723801938000,
          "gmtCurrentSkillLevelStart": 1722503235000,
          "gmtCurrentTitleLevelStart": 1722503213000,
          "gmtModified": 1723691452552,
          "governmentAllowanceLevel": null,
          "id": 579809487052805,
          "introduction": null,
          "inviteCode": null,
          "isAdmin": false,
          "isTemporary": true,
          "nickname": null,
          "password": "{kantboot}3903ef7cb9ac456696311e8095ac6d00.ea9046e011ec24ca577ac2ffa7a6654a",
          "phone": "13155908637",
          "phoneAreaCode": "86",
          "realName": "方某方",
          "schoolName": "纽约州共产主义党政大学",
          "seriesWorkExperiences": [],
          "talentAwardsOfUserAccount": [{
            "gmtCreate": null, "gmtGet": null, "gmtModified": null, "grade": 1, "id": 1, "rank": 1,
            "talentAward": {"description": null, "gmtCreate": null, "gmtModified": null, "id": 1, "isHasGrade": true, "isHasRank": false, "name": "国家科技进步奖"}, "talentAwardId": 1, "userAccountId": 579809487052805
          }],
          "talentPlansOfUserAccount": [{
            "gmtCreate": null,
            "gmtModified": null,
            "gmtParticipate": 1724487337000,
            "id": 1,
            "talentPlan": {
              "desc": null,
              "gmtCreate": null,
              "gmtModified": null,
              "id": 1,
              "name": "“百千万人才工程”国家级人选"
            },
            "talentPlanId": 1,
            "userAccountId": 579809487052805
          }, {
            "gmtCreate": null,
            "gmtModified": null,
            "gmtParticipate": 1723709743000,
            "id": 2,
            "talentPlan": {
              "desc": null,
              "gmtCreate": null,
              "gmtModified": null,
              "id": 2,
              "name": "“国家高层次人才特殊支持计划”人选"
            },
            "talentPlanId": 2,
            "userAccountId": 579809487052805
          }, {
            "gmtCreate": null,
            "gmtModified": null,
            "gmtParticipate": 1723623302000,
            "id": 3,
            "talentPlan": {
              "desc": null,
              "gmtCreate": null,
              "gmtModified": null,
              "id": 3,
              "name": "“创新人才推进计划”中青年领军人才"
            },
            "talentPlanId": 3,
            "userAccountId": 579809487052805
          }],
          "userAccountIdOfInviter": null,
          "userAccountOfInviter": null,
          "userAccountOnline": null,
          "username": null
        }
      }
    }
  },
  data() {
    return {
      currentWorkSeries: {},
      currentSkillLevel: {},
      currentTitleLevel: {},
      currentExpertLevel: {},
      eduLevel: {},
      eduMajor: {},
      eduMajorDegreesInfo: [],
      eduMajorDegreesInfoStr: "",
    }
  },
  mounted() {
    this.init();
  },
  watch:{
    // 监听userInfo
    userInfo: {
      handler: function (val) {
        this.init();
      },
      deep: true
    }
  },
  methods: {
    init() {

    }
  }
}
</script>

<template>
  <div class="card">
    <div style="text-align: left;padding-left: 5px;height: 30px;">
      <div class="dot"
           :class="{
              'dot-is-admin':userInfo.isAdmin,
              'dot-is-no-admin':!userInfo.isAdmin,
            }"
      ></div>
      <span
          v-if="userInfo.isAdmin"
          class="text-is-admin">管理员</span>
      <span
          v-if="!userInfo.isAdmin"
          class="text-is-no-admin"
      >
              非管理员
            </span>
      <span
          v-if="userInfo.id"
          style="float: right;margin: 5px"
          class="small-text">用户ID：{{ userInfo.id }}</span>
    </div>
    <div style="padding: 0px 10px 0 10px;box-sizing: border-box;">

      <div class="iframe-box">
        <iframe
            class="iframe iframe-user-info-phone"
            :src='`${$kt.request.getRootAddress()}/phoneIframe/index.html#/pages/inAdmin/empInAdmin?userInfoJsonStr=${JSON.stringify(userInfo)}`'></iframe>
      </div>
      <div
          v-if="userInfo.id&&!isEdit"
          style="text-align: right">
        <el-button
          type="danger"
          style="color: #FFFFFF"
          @click="$emit('toRemove',userInfo)"
        >
          删除
        </el-button>
        <el-button
        type="primary"
        @click="$emit('toSave',userInfo)"
        >编辑</el-button>
        <div style="height: 10px"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.card {
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .1);
}

.box-content-text {
  width: 100%;
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
}

.small-text {
  font-size: 12px;
  color: #666666;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #409EFF;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  margin-top: 5px;
}

.dot-is-admin {
  background-color: #000000;
}

.dot-is-no-admin {
  background-color: #999999;
}

.dot-fail {
  background-color: #F56C6C;
}

.text-is-admin {
  font-size: 12px;
  color: #000000;
}

.text-is-no-admin {
  font-size: 12px;
  color: #999999;
}

.text-fail {
  font-size: 12px;
  color: #F56C6C;
}

.message-status-fail-reason {
  font-size: 12px;
  color: #F56C6C;
}

.info-box {
  border: 1px solid rgba(0, 0, 0, .2);
  padding: 10px;
  border-radius: 5px;

  .small-text {
    margin-bottom: 5px;
  }
}


.line {
  width: 100%;
  height: 1px;
  background-color: #999999;
  margin: 5px 0;
}

.small-text-text {
  font-weight: bold;
  color: #000000;
}

.in-card {
  margin-bottom: 10px;
  padding: 10px;
  background-color: rgba(0, 0, 0, .05);
  border-radius: 10px;
}

.iframe-box{
  display: inline-block;
  padding: 5px;
  width: auto;
  border-radius: 20px;
}

.iframe{
  width: 300px;
  height: 600px;
  border: 10px solid #000000;
  border-radius: 20px;
}

</style>